import React, { forwardRef, useState } from 'react'
import { Form, Input, Select, InputNumber, DatePicker, Cascader } from 'antd'
import moment from "moment";
import city from "@/utils/citydata2"
import 'moment/locale/zh-cn'
const { Option } = Select
const UserForm = forwardRef((props, ref) => {
  let { regionList } = props;
  const [componentDisabled, setcomponentDisabled] = useState(true)
  var sex_select = [
    { id: 0, roleName: '就职' },
    { id: 1, roleName: '离职' },
  ]
  var age1_select = [
    { id: 1, roleName: '男' },
    { id: 2, roleName: '女' },
    { id: 3, roleName: '未知' },
  ]
  var Live_direction1_select = [
    { id: 'Java程序员', roleName: 'Java程序员' },
    { id: '前端工程师', roleName: '前端工程师' },
    { id: '产品经理', roleName: '产品经理' },
    { id: '测试工程师', roleName: '测试工程师' },
    { id: '运维工程师', roleName: '运维工程师' },
    { id: 'UI设计师', roleName: 'UI设计师' },
    { id: '网络安全工程师', roleName: '网络安全工程师' },
    { id: '数据库工程师', roleName: '数据库工程师' },
    { id: '网络工程师', roleName: '网络工程师' }
  ]
  const formItems = regionList.map((item, index) => {
    const { type, label, model } = item;
    return (
      <div key={index}>
        {item.type == 'input' && <span>
          <Form.Item
            name={model}
            label={item.label}
            rules={[{ required: true, message: '请输入用户名' }]}
          >
            <Input placeholder={'请输入' + item.label} />
          </Form.Item>
        </span>}
        {item.type == 'input_id' && <span>
          <Form.Item
            name={model}
            label={item.label}
          >
            <Input disabled={componentDisabled} />
          </Form.Item>
        </span>}
        {item.type == 'address' && <span>
          <Form.Item
            name={model}
            label={item.label}
            rules={[{ required: true, message: '请输入地址' }]}
          >
            <Cascader options={city} placeholder={'请输入' + item.label} />
          </Form.Item>
        </span>}
        {item.type == 'date' && <span>
          <Form.Item
            name={model}
            label={label}
            rules={[{ required: true, message: '请选择质检时间' }]}
          >
            <DatePicker
              allowClear
            />
          </Form.Item>
        </span>}
        {item.type == 'select_Live_direction1' && <span>
          <Form.Item
            name={model}
            label={label}
            rules={[{ required: true, message: '请选择' + item.label }]}
          >
            <Select>
              {
                Live_direction1_select.map(item =>
                  <Option value={item.id} key={item.id} >{item.roleName}</Option>
                )
              }
            </Select>
          </Form.Item>
        </span>}
        {item.type == 'age1_select' && <span>
          <Form.Item
            name={model}
            label={label}
            rules={[{ required: true, message: '请选择' + item.label }]}
          >
            <Select>
              {
                age1_select.map(item =>
                  <Option value={item.id} key={item.id} >{item.roleName}</Option>
                )
              }
            </Select>
          </Form.Item>
        </span>}
        {item.type == 'sex_select' && <span>
          <Form.Item
            name={model}
            label={label}
            rules={[{ required: true, message: '请选择' + item.label }]}
          >
            <Select>
              {
                sex_select.map(item =>
                  <Option value={item.id} key={item.id} >{item.roleName}</Option>
                )
              }
            </Select>
          </Form.Item>
        </span>}
      </div>
    )
  })
  return (
    <Form
      ref={ref}
      title="horizontal"
      key={ref.id}
      labelAlign="left"
    >
      {formItems}
    </Form>
  )
})
export default UserForm